<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>My Table</title>
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.1/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.1/themes/icon.css">
	<script type="text/javascript" src="jquery-easyui-1.2.1/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.2.1/jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#datagrid').datagrid({
				title:'组员列表',
				iconCls:'icon-save',
				width:815,
				height:410,
				nowrap: false,
				striped: true,
				collapsible:true,
				url:'data.json',
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				frozenColumns:[[
	                {field:'ck',checkbox:true},
	                {title:'code',field:'code',width:80,sortable:true}
				]],
				columns:[[
			        {title:'基本信息',colspan:3},
					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
							return '<span style="color:red">编辑 删除</span>';
						}
					}
				],[
					{field:'name',title:'姓名',width:120},
					{field:'addr',title:'地址',width:120,rowspan:2,sortable:true,
						sorter:function(a,b){
							return (a>b?1:-1);
						}
					},
					{field:'age',title:'年龄',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true,
				toolbar:[{
					id:'btnadd',
					text:'添加',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						//alert('add')
					}
				},{
					id:'btncut',
					text:'剪切',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						//alert('cut')
					}
				},'-',{
					id:'btnsave',
					text:'保存',
					disabled:true,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						//alert('save')
					}
				}]
			});
			var p = $('#test').datagrid('getPager');
			if (p){
				$(p).pagination({
					onBeforeRefresh:function(){
						alert('before refresh');
					}
				});
			}
		});

	</script>
</head>
<body>
	<div class="easyui-panel" title="软件0905" icon="icon-save" collapsible="true" minimizable="true" maximizable="true" closable="true" style="width:960px;height:440px;background:#fafafa;">
			<div class="easyui-layout" style="width:100%;height:100%;">
				<div region="west" icon="icon-reload" title="组员名单" split="true" style="width:140px;border-left:none;border-top:none">
					<ul class="easyui-tree" animate="true" dnd="true">
						<li state="closed">
							<span>文档</span>
							<ul>
								<li state="closed">
									<span>王斌</span>
									<ul>
										<li>
											<span><a href="http://baidu.com">夜曲</a></span>
										</li>
										<li>
											<span>日光海岸</span>
										</li>
										<li>
											<span>childhoodMemory</span>
										</li>
									</ul>
								</li>
								<li>
									<span>子龙</span>
								</li>
								<li>
									<span>孔明</span>
								</li>
								<li>云长</li>
								<li>翼德</li>
							</ul>
						</li>
						<li>
							<span>小旋风</span>
						</li>
					</ul>
				</div>
				<div region="center" style="background:#eee;border-left:none;border-top:none">
					<table id="datagrid"></table>
				</div>
			</div>
	</div>	
</body>
</html>